<template>
    <div class="content" :style="contentStyle">
        <div class="bgOpacity"></div>
        <div :class="isFinished ? 'finishBig' : 'question-contain'">
            <div class="article-options" v-if="isFinished">
                <div class="article-img suc">
                    <img :src="articleMatched[0].imageUrl" alt="">
                </div>
            </div>
        </div>
        <div class="article-contain" :style="isFinished ? articleStyle : ''">
            <div class="article-options" :class="option.isLos ? 'los' : ''"
                     v-for="(option,index) in item.articles" :key="index"
                     :style="articleMatchedStyle(option,index)" :ref='option'
                     @touchstart.stop="start(option,index,$event)"
                     @touchmove.stop="move(option,index,$event)"
                     @touchend.stop="end(option,index,$event)">
                <div class="article-img">
                    <img :src="option.imageUrl" alt="">
                </div>
            </div>
<!--            <Point v-if="!item.operated && pointShow" :style="pointMoveStyle"/>-->
        </div>
    </div>
</template>

<script>
    import { mixins } from "@/common/mixins/assignmentMixins.js"
    // import Point from "../point.vue"
    export default {
        mixins: [mixins],
        data(){
            const articleMatched = this.item.articles.filter(item=>{return item.isMatched})   //过滤被选中命名的意象或角色
            return{
                isFinished: false,
                pointShow: false,
                pointMove: false,
                articleMatched,     //随机被命名的意象或角色
            }
        },
        beforeMount() {
            if(!this.item.isFinish){
                if(this.index === this.activeIndex) this.onEnter()
            } else {
                this.isFinished = true
                return
            }
        },
        // components:{
        //     Point
        // },
        computed:{
            pointMoveStyle(){
                return{
                    marginLeft: '0',
                    marginTop: '0',
                    transform: this.pointMove ? "translateY(-7rem)" : '',
                    transition: 'all 1s'
                }
            },
            articleMatchedStyle(option,index){
                return function (option,index) {
                    return{
                        left: index * 7 + 'rem',
                        transition: option.transition,
                        transform: "translate3d(" + option.moveX + "px," + option.moveY + "px,0)",
                        zIndex: option.zIndex,
                    }
                }
            },
            articleStyle(){
                return{
                    display: 'none',
                    transform: 'all 0.5s'
                }
            }
        },
        methods:{
            onEnter:function(){
                setTimeout(()=>{this.pointShow = true},3000)
                setTimeout(()=>{this.pointMove = true},5000)
                this.item.operated = false
            },
            start: function (option, index, event) {
                if (this.item.isFinish || option.isLos || this.isFinished) {
                    return
                }
                this.$set(option, 'x', event.changedTouches[0].clientX)
                this.$set(option, 'y', event.changedTouches[0].clientY)
                this.$set(option,'transition','all 0s')
                this.$set(option, 'zIndex',99)
                this.updateOperated({questionIndex:this.questionIndex,param:this.index})
            },
            move: function (option, index, event) {
                this.$set(option, 'moveX',event.changedTouches[0].clientX - option.x)
                this.$set(option, 'moveY',event.changedTouches[0].clientY - option.y)
            },
            end: function (option, index, event) {
                this.$set(option, 'moveX',0)
                this.$set(option, 'moveY',0)
                this.$set(option, 'transition','all 0.5s')
                this.$set(option, 'zIndex',98)
                const isTypeName = option.name === this.articleMatched[0].name
                if(isTypeName){
                    this.sucMusic()
                    this.isFinished = true
                    this.sucMusic()
                    this.setFireworkPlay(event)
                    setTimeout(()=>{
                        this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                    },1000)
                    this.addAnswer({
                        id: this.item.id,
                        type: true
                    })
                } else {
                    this.losMusic()
                    this.$set(option, "isLos", true)
                    setTimeout(() => {
                        this.$set(option, "isLos", false)
                    }, 1000)
                    if(this.isSeedEntery){
                        setTimeout(()=>{this.$emit('nextAssignment')},600)
                    } else {
                        this.$emit("losShow")
                    }
                    this.addAnswer({
                        id: this.item.id,
                        type: false
                    })
                }
            },
        },
        watch: {
            activeIndex: function (activeIndex) {
                if (this.index === activeIndex) this.onEnter()
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import '../../../common/stylus/content.styl'
    @keyframes finishBig
        0%
            transform scale(1)
        100%
            transform scale(1.5)
    .bgOpacity
        $coord('WHLT',100%,100%,0,0)
        background url($urlTitle + 'assignment/image/breakthrough/半透明背景60.png')0 0/100% 100%
    .question-contain
        position absolute
        $center('WHLT',7rem,7rem)
        background url($urlTitle + 'assignment/image/page16/展示框.png')0 0/100% 100%
        opacity 0
        transform scale(0)
        animation bounce-recCard 1s
        animation-delay 3s
        animation-fill-mode forwards
    .finishBig
        position absolute
        $center('WHLT',7rem,7rem)
        background url($urlTitle + 'assignment/image/page16/展示框.png')0 0/100% 100%
        animation finishBig 1s
        animation-fill-mode forwards
        .article-options
            position absolute
            $center('WHLT',5rem,5rem)
            background url($urlTitle + 'assignment/image/page16/选项背景.png')0 0/100% 100%
            .article-img
                position absolute
                $center('WHLT',4rem,4rem)
                display flex
                align-items center
                justify-content center
                img
                    min-width 60%
                    max-width 80%
                    max-height 100%
                    filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)
    .article-contain
        position absolute
        $center('WHLT',26rem,5rem)
        margin-top 5rem
        opacity 0
        animation loading-in 1s
        animation-delay 4s
        animation-fill-mode forwards
        .article-options
            position absolute
            width 5rem
            height 5rem
            background url($urlTitle + 'assignment/image/page16/选项背景.png')0 0/100% 100%
            .article-img
                position absolute
                $center('WHLT',4rem,4rem)
                display flex
                align-items center
                justify-content center
                img
                    min-width 60%
                    max-width 80%
                    max-height 100%
                    filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)
</style>
